<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>职务</title>
    <link rel="stylesheet" href="../static/css/mdui.min.css" th:href="@{/css/mdui.min.css}">
</head>
<body class="mdui-appbar-with-toolbar mdui-drawer-body-left mdui-theme-primary-teal mdui-theme-accent-pink">
<div th:replace="_widgets::header"></div>
<div th:replace="_widgets::drawer"></div>
<div class="mdui-container">
    <div class="mdui-table-fluid mdui-m-t-4">
        <table class="mdui-table">
            <thead>
            <tr>
                <th>#</th>
                <th>挂号名称</th>
                <th>费用</th>
                <th colspan="2"><i class="mdui-icon material-icons">&#xe5d2;</i></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="registration:${registrations}">
                <td class="no">1</td>
                <td th:text="${registration.name}">专家号</td>
                <td th:text="${registration.cost}">20</td>
                <td th:data-which="${registration.id}">
                    <a href="javascript:void(0)" mdui-tooltip="{content: '修改'}" onclick="edit(this)">
                        <i class="mdui-icon material-icons">&#xe3c9;</i>
                    </a>
                </td>
                <td class="item" th:data-which="${registration.id}">
                    <a href="javascript:void(0)" mdui-tooltip="{content: '删除'}" onclick="deleteItem(this)">
                        <i class="mdui-icon material-icons">&#xe872;</i>
                    </a>
                </td>
            </tr>
            <tr id="empty"></tr>
            </tbody>
        </table>
    </div>
    <button id="btnAdd" class="mdui-fab mdui-fab-fixed mdui-ripple mdui-color-theme-accent"
            mdui-tooltip="{content: '添加挂号', position: 'top'}">
        <i class="mdui-icon material-icons">add</i>
    </button>
</div>
<div class="mdui-dialog" id="editDialog">
    <div class="mdui-dialog-title">编辑</div>
    <div class="mdui-dialog-content">
        <form id="registrationForm" method="post">
            <input id="_id" type="hidden" name="id"/>
            <div class="mdui-textfield">
                <label class="mdui-textfield-label">挂号名称</label>
                <input id="inputName" name="name" class="mdui-textfield-input" required maxlength="32"/>
                <div class="mdui-textfield-error">请输入挂号名称</div>
            </div>
            <div class="mdui-textfield">
                <label class="mdui-textfield-label">费用</label>
                <input id="inputCost" name="cost" class="mdui-textfield-input" required/>
                <div class="mdui-textfield-error">请输入费用</div>
            </div>
        </form>
    </div>
    <div class="mdui-dialog-actions">
        <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
        <button class="mdui-btn mdui-ripple" mdui-dialog-confirm onclick="save()">保存</button>
    </div>
</div>
</body>
<script src="../static/js/mdui.min.js" th:src="@{/js/mdui.min.js}"></script>
<script>
    var $$ = mdui.JQ;

    var listItem = $$('#registrations');
    listItem.parent().addClass('mdui-list-item-active');

    var no = 1;
    reNumber();

    $$('#btnAdd').on('click', function () {
        $$('#inputName').val('');
        $$('#inputCost').val('');
        new mdui.Dialog('#editDialog').open();
    });

    function save() {
        var _id = $$('#_id').val();
        var method = (_id == null || _id === '') ? 'POST' : 'PUT';
        $$.ajax({
            method: method,
            url: '/registration',
            data: $$('#registrationForm').serialize(),
            success: function (responseJson) {
                var response = JSON.parse(responseJson);
                if (response != null && response.result === 'success') {
                    // var newRow = "<tr>" +
                    //     "<td class='no'>" + no++ + "</td>" +
                    //     "<td>" + name + "</td>" +
                    //     "<td>" + cost + "</td>" +
                    //     "<td>" +
                    //     "<a href=\"#\" mdui-tooltip=\"{content: '修改'}\">" +
                    //     "<i class=\"mdui-icon material-icons\">&#xe3c9;</i>" +
                    //     "</a>" +
                    //     "</td>" +
                    //     "<td class=\"item\" data-which='" + response.message + "'>" +
                    //     "<a href=\"javascript:void(0)\" mdui-tooltip=\"{content: '删除'}\" onclick=\"deleteItem(this)\">" +
                    //     "<i class=\"mdui-icon material-icons\">&#xe872;</i>" +
                    //     "</a>" +
                    //     "</td>" +
                    //     "</tr>";
                    // $$('#empty').before(newRow);
                    location.reload();

                } else if (response != null) {
                    mdui.alert(response.message);
                } else {
                    mdui.alert("未知错误");
                }
            }
        });
    }

    function edit(obj) {
        var parent = obj.parentNode;
        var _id = parent.dataset.which;
        var parentPre = $$(parent).prev();
        var parentPrePre = $$(parentPre).prev();
        new mdui.Dialog('#editDialog').open();
        $$('#_id').val(_id);
        $$('#inputName').val(parentPrePre.text());
        $$('#inputCost').val(parentPre.text());
    }

    function deleteItem(obj) {
        mdui.confirm('确定删除？删除后无法撤销', '', function () {
            var which = obj.parentNode.dataset.which;
            if (which === null || which === undefined) {
                console.error('dataset err');
                return;
            }
            doDeleteItem(which);
        }, function () {

        }, {'confirmText': '确定', 'cancelText': '取消'});
    }

    function doDeleteItem(which) {
        $$.ajax({
            method: 'DELETE',
            url: '/registration/' + which,
            success: function (result) {
                if (result === 'success') {
                    $$('.item').each(function () {
                        if (this.dataset.which === which) {
                            $$(this).parent().remove();
                            reNumber();
                        }
                    })
                } else {
                    mdui.alert(result);
                }
            }
        });
    }

    function reNumber() {
        no = 1;
        $$('.no').each(function () {
            $$(this).text(no++);
        });
    }
</script>
</html>